<template>
  <div class="bg-[url('assets/images/bg.png')] bg-cover bg-center bg-no-repeat h-screen
   text-white flex p5 overflow-hidden" v-if="data">
   <!-- 左侧组件 -->
     <div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
       <!-- 横向柱状图 -->
       <HorizontalBar class="h-1/3 box-border pb-4" :data="data.regionData" />
       <!-- 雷达图 -->
       <RadarBar class="h-1/3 box-border pb-4" :data = "data.riskData" />
       <!-- 关系图 -->
       <Relation class="h-1/3 box-border pb-4" :data="data.relationData"/>
     </div>
     <!-- 中间组件 -->
     <div class="w-1/2 mr-5 flex flex-col">
       <!-- 数据总览 -->
       <TotalData class="bg-opacity-50 bg-slate-800 p-3" :data="data.totalData"/>
       <!-- 地图可视化 -->
       <MapChart class="bg-opacity-50 bg-slate-800 p-3 mt-4 flex-1" :data="data.mapData" />
     </div>
     <!-- 右侧组件 -->
     <div class="flex-1 bg-opacity-50 bg-slate-800 p-3 flex flex-col">
       <!-- 竖向柱状图 -->
       <VerticalBar class="h-1/3 box-border pb-4" :data = "data.serverData"/>
       <!-- 环形图 -->
       <RingBar class="h-1/3 box-border pb-4" :data="data.abnormalData"/>
       <!-- 文档云图 -->
       <WordCloud class="h-1/3 box-border pb-4" :data = "data.wordCloudData"/>
     </div>
  </div>
 </template>
 
 <script setup>
   import HorizontalBar from './components/HorizontalBar.vue';
   import RadarBar from './components/RadarBar.vue';
   import Relation from './components/Relation.vue';
   import TotalData from './components/TotalData.vue';
   import MapChart from './components/MapChart.vue';
   import WordCloud from './components/WordCloud.vue';
   import VerticalBar from './components/VerticalBar.vue';
   import RingBar from './components/RingBar.vue';
   import {ref} from 'vue';
   import {getVisualization} from './api/visualization';
   const data = ref()

   // 获取数据
   const loadData = async () => {
    try {
      data.value = await getVisualization()
     console.log(data.value) 
    } catch (error) {
      console.log(error)
    }
   }

   setInterval(()=>{
    loadData()
   },3000)
 </script>
 <style scoped></style>